<template>
    <div>
        <draggable v-model="componentListCopy" :group="{ name: groupName, pull: 'clone', put: put }" style="min-height: 500px">
            <div class="item"
                 v-for="(item, index) in componentListCopy"
                 :key="index"
                 v-if="item && item.show"
                 @click="showDetailRight(item, index)"
            >
                <!-- 加载容器并递归渲染 -->
                <component v-if="item.componentType === 'container'"
                           :is="item.is"
                           :groupName="item.groupName"
                           :key="index">
                </component>

                <!-- 加载表格 -->
                <component v-else-if="item.componentType === 'table'"
                           :is="item.is"
                           :componentType="item.componentType"
                           :type="item.type"
                           :tableData="item.tableData"
                           :columns="item.columns"
                           :key="index">
                </component>

                <!-- 加载表格 -->
                <component v-else-if="item.componentType === 'mySelf'"
                           :is="item.is"
                           v-if="false"
                           :key="index">
                </component>

                <!-- 加载输入框 -->
                <component v-else-if="item.componentType === 'input'"
                           :is="item.is"
                           :labelText="item.labelText"
                           :defaultValue="item.defaultValue"
                           :placeholder="item.placeholder"
                           :key="index">
                </component>

                <!-- 加载按钮 -->
                <component v-else-if="item.componentType === 'button'"
                           :is="item.is"
                           :labelText="item.labelText"
                           :type="item.type"
                           :key="index">
                </component>

                <!-- 加载图标 -->
                <component v-else-if="item.componentType === 'icon'"
                           :is="item.is"
                           :iconClass="item.iconClass"
                           :key="index">
                </component>
            </div>
        </draggable>
    </div>
</template>

<script>
import draggable from "vuedraggable";
import MyIcon from "@/components/components/MyIcon";
import MyButton from "@/components/components/MyButton";
import MyInput from "@/components/components/MyInput";
import MyLink from "@/components/components/MyLink";
import MyRadio from "@/components/components/MyRadio";
import MyTable from "@/components/components/MyTable";
import MyContainer from "@/components/components/MyContainer";
import MySelf from "@/components/components/MySelf";

export default {
    name: "MyMainDraggable",
    components: {
        draggable,
        MyIcon,
        MyInput,
        MyLink,
        MyRadio,
        MyButton,
        MySelf,
        MyTable,
        MyContainer
    },
    props: {
        componentList: {
            type: Array,
            default: () => []
        },
        groupName: {
            type: String,
            default: "sky"
        },
        pull: {
            type: String,
            default: ""
        },
        put: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            componentListCopy: this.componentList
        }
    },
    watch: {
        componentList: {
            handler(newVal) {
                this.componentListCopy = newVal
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
        showDetailRight(item,index) {
            // 发射事件给父组件
            this.$emit('showDetailRight', item, index);
        }
    }
}
</script>

<style scoped>
.item {
    padding: 10px;
    border: 1px solid #ccc;
    margin: 5px;
    background-color: #f9f9f9;
}
</style>
